<template>
  <demo-content :title="title">
    <p></p>
    <canvas
      ref="canvasRef"
      width="600"
      height="400"
      style="background-color: orange"
    ></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "矩形操作";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.fillStyle = "red";
  ctx.fillRect(100, 100, 100, 100);
  ctx.fillStyle = "green";
  ctx.fillRect(150, 150, 100, 100);
  // clearRect 会将指定区域内的像素全部设置为透明
  ctx.clearRect(150, 150, 50, 50);
});
</script>

<style src="./default.css" scoped></style>
